<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="common">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="showBox"></div>
<button onclick="saveArr()">存redis</button>
<button onclick="confirmSite()">确认座位</button>
</body>
<script th:inline="none">
    var arr=[[[0,0],[0,1],[0,1],[0,1],[0,1]],[[0,1],[0,1],[0,1],[0,1],[0,1]],[[0,1],[0,1],[0,1],[0,1],[0,1]],[[0,1],[0,1],[0,1],[0,1],[0,1]],[[0,1],[0,1],[0,1],[0,1],[0,1]]];
    var arr2 = [];
    for (var i=0;i<5;i++){
        arr2[i]=[];
        for(var j=0;j<5;j++){
            arr2[i][j]=[0,1];
        }
    }
    console.log(arr2);
    $(function (){
       // alert(arr2);
        showSite();
    })
    function showSite(){
        var str = "";

        for(var i = 0;i<arr2.length;i++){
            str+="<div>"
            for(var j =0;j<arr2[i].length;j++){
                var mark = "green";
                if(arr2[i][j][0]==1){
                    mark ="red";
                }
                str+="<div class='site-box' id='box"+i+"-"+j+"' data-x='"+i+"' data-y='"+j+"' style='background-color: "+mark+"'>"+arr2[i][j][1]+"</div>";
            }
            str+="</div><div style='height: 30px'>0</div>";
        }
        $("#showBox").html(str);
    }
    //存redis
    function saveArr(){
        $.ajax({
            url:"/test/saveArr",
            data:{siteId:1,siteRow:5,siteCol:5},
            success:function(){
            }
        })
    }
    //选座位
    $(".site-box").click(function (){
        alert(111)
    })
    $(document).on("click",".site-box",function (){
        console.log(this);
        //变颜色
        $(this).css("background-color","red");
        $(this).addClass("used");
        //改数组信息
        var x = $(this).data("x");
        var y = $(this).data("y");

        console.log("x:"+x)
    })
    //确认订单
    function confirmSite(){
        //数组转成json字符串
        var jsonarr = JSON.stringify(arr)
        console.log(jsonarr);
        //json转成数组
        var arrs = JSON.parse(jsonarr);
        console.log(arrs);

        $.ajax({
            url:"/test/confirmSite",
            data:{siteArr:jsonarr},
            success:function(data){
                alert(data);
            }
        })
    }
</script>
<style>
    .site-box{
        width: 30px;height: 30px;
        float: left;
        border: black solid 1px;
    }
</style>
</html>